<template>
  <div>
    <!-- 头部 -->
    <header class="jc-sb head flex fcc bg-fff pl-10" @click="$router.go(-1)">
      <i class="iconfont iconleft orange fg2"></i>
      <p class="order f16 fg2">填写订单</p>
    </header>
    <!-- 身体 -->
    <div class="content flex fcc bg-fff mt-5 mb-10">
      <img class="chart" :src="`https://img.villaday.com${house.imageUrl}`" alt>
      <div class="introduce">
        <p class="f14">{{house.street}} . {{house.houseTypeName}}</p>
        <div class="house">
          <p class="f10 date pt-5 pb-5">入住日期:{{startDate | formatTime}} - {{endDate | formatTime}}</p>
          <p class="f10">{{house.description}}</p>
        </div>
      </div>
    </div>
    <!-- 身体 -->
    <main>
      <div class="contact bg-fff pl-10">
        <p class="contacts pl17">
          <span>联系人</span>
          <input class="ml-10 f14" type="text" placeholder="请填写联系人姓名" v-model="tenantName">
        </p>
        <p class="phone pl17">
          <span>手机号</span>
          <input class="ml-10 f14" type="text" placeholder="请填写联系人手机号码" v-model="phone">
        </p>
        <p class="tips pl17 f14">*请填写正确的手机号码方便管家与你联系</p>
      </div>
      <div class="discount bg-fff mt-10 pl-10 pr-10">
        <div class="money flex jc-sb aic">
          <p class="f18 pl17">优惠券</p>
          <p>
            <span class="f12 f999">无可用</span>
            <i class="iconfont iconrightArrow f12 f999"></i>
          </p>
        </div>
        <div class="total">
          <p class="flex jc-sb aic pt-25 pl17 f14 f999">
            <span>总金额:</span>
            <span>￥{{totalMoney}}</span>
          </p>
          <div class="flex jc-sb aic pt-20 pl17 f16 pay">
            <h3>实付金额:</h3>
            <h3>￥{{totalMoney}}</h3>
          </div>
        </div>
      </div>
    </main>
    <!-- 底部 -->
    <footer class="footer bg-fff" @click="submitOrder">
      <div class="bottom fixed">
        <p class="saubmission pt-15">提交订单</p>
      </div>
    </footer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      house: {},

      // 提交订单参数
      preOrderId: "",
      tenantName: "",
      phone: "",
      houseTypeName: ""
    };
  },

  computed: {
    ...mapGetters(["houseId", "startDate", "endDate", "totalMoney"])
  },

  created() {
    this.preSubmitOrder();
  },

  methods: {
    // 预提交
    async preSubmitOrder() {
      this.$loading();
      let data = {
        houseId: this.houseId,
        startDate: this.startDate,
        endDate: this.endDate,
        totalMoney: this.totalMoney
      };
      // console.log(data);
      let url = "/order/preSubmitOrder";
      try {
        let res = await this.$axios.post(url, data);
        // console.log(res);
        this.houseTypeName = res.house.houseTypeName;
        this.house = res.house;
        this.preOrderId = res.preOrderId;
      } catch (error) {}
      this.$clear();
    },

    // 提交订单
    async submitOrder() {
      let url = "/order/submitOrder";
      let data = {
        preOrderId: this.preOrderId,
        tenantName: this.tenantName,
        phone: this.phone
      };
      try {
        let res = await this.$axios.post(url, data);
        // console.log(res);
        // 提示用户提交订单成功并跳转
        this.$toast.success("成功提交订单");
        this.$router.push({
          path: "/order/orderPay",
          query: {
            orderId: res.orderId,
            tenantName: this.tenantName,
            houseTypeName: this.houseTypeName
          }
        });
      } catch (error) {}
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/writeOrder.less";
</style>

